【CSS】flex - フレックスアイテムのサイズ

CSSのflexプロパティについて解説します。

検証環境

CSS

macOS

14.1

flex

flexは“フレックスアイテムのサイズ”のプロパティです。

拡大係数や縮小係数、初期サイズを一括定義します。

各項目の個別設定はflex-grow、flex-shrink、flex-basisを使用します。

【CSS】flex-grow - フレックスアイテムの拡大係数

【CSS】flex-shrink - フレックスアイテムの縮小係数

【CSS】flex-basis - フレックスアイテムの初期サイズ

基本構文

flow: 拡大係数 縮小係数 初期サイズ;

サンプル

拡大係数のみ

sample.html

<style>
div {
    display: flex;
    width: 300px;
    background: lightgray;
}
p {
    border: 1px solid black;
    text-align: center;
}
.p1 {
    ___ih_hl_start
    flex: 1;
    ___ih_hl_end
}
.p2 {
    ___ih_hl_start
    flex: 3;
    ___ih_hl_end
}
.p3 {
    ___ih_hl_start
    flex: 7;
    ___ih_hl_end
}
</style>

<div>
    <p class="p1">HTML</p>
    <p class="p2">CSS</p>
    <p class="p3">JavaScript</p>
</div>

プレビュー

拡大係数・初期サイズ

sample.html

<style>
div {
    display: flex;
    width: 300px;
    background: lightgray;
}
p {
    border: 1px solid black;
    text-align: center;
}
.p1 {
    ___ih_hl_start
    flex: 1 30%;
    ___ih_hl_end
}
.p2 {
    ___ih_hl_start
    flex: 2 20%;
    ___ih_hl_end
}
.p3 {
    ___ih_hl_start
    flex: 2 10%;
    ___ih_hl_end
}
</style>

<div>
    <p class="p1">HTML</p>
    <p class="p2">CSS</p>
    <p class="p3">JavaScript</p>
</div>

プレビュー

拡大係数・縮小係数・初期サイズ

sample.html

<style>
div {
    display: flex;
    width: 300px;
    background: lightgray;
}
p {
    border: 1px solid black;
    text-align: center;
}
.p1 {
    ___ih_hl_start
    flex: 1 1 10%;
    ___ih_hl_end
}
.p2 {
    ___ih_hl_start
    flex: 1 3 20%;
    ___ih_hl_end
}
.p3 {
    ___ih_hl_start
    flex: 1 7 30%;
    ___ih_hl_end
}
.p4 {
    ___ih_hl_start
    flex: 1 1 50%;
    ___ih_hl_end
}
.p5 {
    ___ih_hl_start
    flex: 1 3 50%;
    ___ih_hl_end
}
.p6 {
    ___ih_hl_start
    flex: 1 7 50%;
    ___ih_hl_end
}
</style>

<div>
    <p class="p1">HTML</p>
    <p class="p2">CSS</p>
    <p class="p3">JavaScript</p>
</div>
<div>
    <p class="p4">HTML</p>
    <p class="p5">CSS</p>
    <p class="p6">JavaScript</p>
</div>

プレビュー